<template>
    <div class="customer-level-table">
        <el-table
            stripe
            :data="tableData"
            row-key="id"
            border
            :loading="loading"
            :tree-props="{children: 'childrenList', hasChildren: 'hasChildren'}"
            :indent="13"
            :expand-row-keys="expandedRowKeys"
            header-row-class-name="common-list-table-header__v2"
            v-loading="loading"
        >
            <el-table-column
                v-for="column in columns"
                :prop="column.prop"
                :label="column.label"
                :resizable="true"
                :show-overflow-tooltip="true"
                :key="column.prop"
            >
                <template slot-scope="scope">
                    <div v-if="column.prop === 'name'" class="table-blacklist customer-level-table-name">
                        <span class="view-detail-btn" @click="openCustomerDetial(scope.row.id)">{{ scope.row[column.prop] }}</span>
                        <span v-if="customerId === scope.row.id" class="font-now">
                            {{ $t('customer.current') }}
                        </span>
                    </div>
                    <div v-else-if="column.prop === 'address'">
                        <div>{{ formatAddress(scope.row[column.prop]) }}</div>
                    </div>
                    <div v-else style="width: 100%">
                        {{ scope.row[column.prop] }}
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script>
import { getParentCustomerTree } from '@src/api/CustomerApi';
import { openAccurateTab } from '@src/util/platform';
import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum';
import { customerCheckAuth } from '@src/api/CustomerApi';

export default {
    name: 'customer-level-table',
    props: {
        customerId: {
            type: Number|String,
        },
    },
    data() {
        return {
            tableData: [],
            expandedRowKeys: [],
            loading: false,
            columns: [
                {
                    prop: 'name',
                    label: this.$t('common.fields.customerName.displayName'),
                },
                {
                    prop: 'serialNumber',
                    label: this.$t('common.fields.customerNo.displayName'),
                },
                {
                    prop:'address',
                    label: this.$t('common.fields.customerAddress.displayName'),
                },
                {
                    prop:'customerManagerName',
                    label: this.$t('common.fields.executorUser.displayName'),
                },
            ],
        }
    },
    created() {
        this.loading = true;
        getParentCustomerTree({customerId: this.customerId}).then(res => {
            this.tableData = res?.result ? [res?.result] : [];
        }).catch(err => {
            console.log(err);
        }).finally(() => {
            this.loading = false;
        });
    },
    methods: {
        formatAddress(addressObj) {
            const addressParts = [
                addressObj.adCountry,
                addressObj.adProvince,
                addressObj.adCity,
                addressObj.adDist,
                addressObj.adStreet,
                addressObj.adAddress
            ];
            
            // 过滤掉空值并用 / 连接
            return addressParts.filter(part => part).join(' / ');
        },
        async openCustomerDetial(customerId) {
            if (customerId === this.customerId) return;
            try {
                const res = await customerCheckAuth({
                    customerId,
                    from: 'parentCustomer',
                })
                if (!res?.result?.check) {
                    this.$message.error(this.$t("common.errorMap.code2008.title"));
                    return;
                }
            } catch (error) {
                console.log(error);
                return;
            }
            let fromId = window.frameElement.getAttribute('id');
            openAccurateTab({
                type: PageRoutesTypeEnum.PageCustomerView,
                key: customerId,
                params: `noHistory=1`,
                fromId
            })
        },
    }
}
</script>

<style lang="scss" scoped>
.customer-level-table {
    padding: 16px;
    .el-table {
        width: 100%;
        ::v-deep .font-now {
            color: #F7BA1E;
            margin-left: 8px;
        }
        ::v-deep .el-icon-arrow-right:before {
            content: "\25b6";
        }
    }
}
::v-deep .cell:has(.customer-level-table-name) {
    display: flex;
    height: 40px;
}
::v-deep .customer-level-table-name {
    flex: 1;
    text-overflow: ellipsis;
    overflow: hidden;
    text-wrap: nowrap;
}
</style>